<template>
  <a-modal
    :title="'脱敏配置'"
    :visible="visible"
    ok-text="确定"
    cancel-text="取消"
    width="738px"
    :destroy-on-close="true"
    :mask-closable="false"
    centered
    @ok.stop="onOK"
    @cancel.stop="onCancel"
  >
    <desensitization
      ref="desensitization"
      :visible="true"
      :have-set-desensitization="haveSetDesensitization"
    ></desensitization>
  </a-modal>
</template>
<script lang="ts">
/**
 * 脱敏弹窗
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import Desensitization from '@/components/data/gis/Desensitization.vue'

@Component({
  name: 'DesensitizationSetModal',
  components: {
    Desensitization,
  },
})
export default class DesensitizationSetModal extends Vue {
  @Prop() visible!: boolean
  /* 脱敏配置传入参数 */
  @Prop({ type: Object, default: () => ({}) }) haveSetDesensitization!: object

  /* 确定 */
  public onOK() {
    const desensitizationVue: any = this.$refs.desensitization as Vue
    const desensitization = desensitizationVue.confirm()
    const config = {
      desensitization,
    }
    this.$emit('config-submit', config)
  }

  /* 取消 */
  public onCancel() {
    this.$emit('cancel')
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body {
  padding-top: 0;
}
</style>
